<template>
  <div class="feeds-container">
    <Waterfall :list="mineProductStore.purchasedList" imgSelector="image" :width="100"
      :animationEffect="'animate__zoomIn'" :breakpoints="breakpoints" :animationDelay="200" :animationDuration="1000"
      :posDuration="800" infinite-scroll-immediate="false" v-infinite-scroll="loadMore" infinite-scroll-delay="2000">
      <template #default="{ item, url }">
        <div class="waterfull-card">
          <!-- 封面 -->
          <LazyImg :url="Array.isArray(url) ? url[0] : url" style="border-radius: 10px;" />
          <div class="footer">
            <!-- 商品的标题 -->
            <div class="title"><span>{{ item.title }}</span></div>

            <!-- 价格 -->
            <div class="price">
              <span style="color: red;font-size: 16px;font-weight: 600;">￥{{ item.price }}</span>
              <span style="margin-left:5px;font-size: 12px;color: #666666;text-decoration: line-through">￥{{
                item.originalPrice }}</span>
              <el-tag type="warning" size="small" v-if="activeTab === 'publish' && item.status === 3"
                style="font-size: 12px;color: #E6A23C;margin-left: 10px">审核中</el-tag>
              <el-tag type="danger" size="small" v-if="activeTab === 'publish' && item.status === 6"
                style="font-size: 12px;color: #F56C6C;margin-left: 10px">审核失败</el-tag>
              <el-tag type="success" size="small" v-if="activeTab === 'publish' && item.status === 9"
                style="font-size: 12px;color: #67C23A;margin-left: 10px">已上线</el-tag>
              <el-tag type="info" size="small" v-if="activeTab === 'publish' && item.status === 12"
                style="font-size: 12px;color: #E6A23C;margin-left: 10px">已卖出</el-tag>
            </div>
            <!-- 展示状态 -->
            <div style="display:flex;justify-content: space-between;margin-bottom: 5px">
              <span v-if="props.activeTab !== 'publish' && activeTab !== 'collect'"
                style="font-size: 12px;color: #9e9e9e">收货方式：{{ item.postMode }}</span>
              <span v-if="props.activeTab !== 'publish' && activeTab !== 'collect'"
                style="font-size: 12px;color: #3a64ff;cursor: pointer">查看订单</span>
              <span v-if="props.activeTab === 'publish' || activeTab === 'collect'"
                style="font-size: 12px;color: #9e9e9e">发货方式：{{ item.postType === 0 ? '邮寄' : '用户自提' }}</span>
              <span v-if="props.activeTab === 'publish' && (item.status === 1 || item.status === 2)"
                style="font-size: 12px;color: #3a64ff;cursor: pointer">删除</span>
              <span v-if="props.activeTab === 'publish' && (item.status === 9)"
                style="font-size: 12px;color: #3a64ff;cursor: pointer">下架</span>
            </div>
            <!-- 操作按钮 -->
            <!--<div v-if="activeTab === 'purchase'"
              style="display: flex;justify-content: flex-end;font-size: 15px;margin-top: 5px">
              <button v-if="item.dealStatus === 1" class="publishBtn" type="submit"><span
                  class="btn-content">订单失败</span></button>
              <button v-if="item.dealStatus === 9" class="publishBtn" type="submit"><span
                  class="btn-content">去评价</span></button>
              <button v-if="item.dealStatus === 11" class="publishBtn" type="submit"><span
                  class="btn-content">评价完成</span></button>
              <button v-if="item.dealStatus === 3 && item.postMode === '物流发货'" class="publishBtn" type="submit"><span
                  class="btn-content">待发货</span></button>
              <button v-if="item.dealStatus === 3 && item.postMode === '用户自提'" class="publishBtn" type="submit"><span
                  class="btn-content">待上传提货地址</span></button>
              <button v-if="item.dealStatus === 0 || item.dealStatus === 2" class="publishBtn" type="submit"><span
                  class="btn-content">待付款</span></button>
              <button v-if="item.dealStatus === 4 && item.postMode === '用户自提'" class="publishBtn" type="submit"><span
                  class="btn-content">确认提货：{{ item.postSelfCode }} </span></button>
              <button v-if="item.dealStatus === 4 && item.postMode === '物流发货'" class="publishBtn" type="submit"><span
                  class="btn-content">确认收货</span></button>
            </div>
            <div v-if="activeTab === 'sell'"
              style="display: flex;justify-content: flex-end;font-size: 15px;margin-top: 5px">
              <button v-if="item.dealStatus === 0 || item.dealStatus === 2" class="publishBtn" type="submit"><span
                  class="btn-content">待付款</span></button>
              <button v-if="item.dealStatus === 1" class="publishBtn" type="submit"><span
                  class="btn-content">订单失败</span></button>
              <button v-if="item.dealStatus === 9" class="publishBtn" type="submit"><span
                  class="btn-content">交易成功</span></button>
              <button v-if="item.dealStatus === 11" class="publishBtn" type="submit"><span
                  class="btn-content">交易成功</span></button>
              <button v-if="item.dealStatus === 4 && item.postMode === '物流发货'" class="publishBtn" type="submit"><span
                  class="btn-content">待收货</span></button>
              <button v-if="item.dealStatus === 4 && item.postMode === '用户自提'" class="publishBtn" type="submit"><span
                  class="btn-content">待提货: {{ item.postSelfCode }}</span></button>
              <button v-if="item.dealStatus === 3 && item.postMode === '物流发货'" class="publishBtn" type="submit"><span
                  class="btn-content">去发货</span></button>
              <button v-if="item.dealStatus === 3 && item.postMode === '用户自提'" class="publishBtn" type="submit"><span
                  class="btn-content">上传提货地址</span></button>
            </div>-->
          </div>
        </div>
      </template>
    </Waterfall>
  </div>
</template>

<script setup lang='ts'>
// import { ref, reactive } from 'vue'
import { Waterfall, LazyImg } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'
import { useMineProductStore } from '@/stores/modules/mineProduct'
import { onMounted, reactive } from 'vue'
const mineProductStore = useMineProductStore()

// 在 onMounted 中检查并加载数据
onMounted(() => {
  loadData()
})

// 加载数据
const loadData = async () => {
  mineProductStore.resetPurchased()
  await getMinePurchasedProductList()
}

// 加载更多
const loadMore = () => {
  getMinePurchasedProductList()
}

// 获取“我的”界面用户的商品列表
import useMineProduct from '@/hooks/useMineProduct'
const { getMinePurchasedProductList } = useMineProduct()

// 接受父组件传递的数据
const props = defineProps({
  activeTab: {
    type: String,
    default: '',
  },
})
const breakpoints = reactive({
  1200: {
    // when wrapper width < 1200
    rowPerView: 5,
  },
  800: {
    // when wrapper width < 800
    rowPerView: 4,
  },
  500: {
    // when wrapper width < 500
    rowPerView: 2,
  },
})
</script>

<style lang='less' scoped>
.waterfull-card {
  transition: all .4s;

  &:hover {
    cursor: pointer;
    transform: translateY(-10px);
  }
}
</style>
